<template>
	<view>
		<view class="kefu-bg">
			<image class="image-bg" :src="`${baseurl}/static/tb/Group.png`" mode="aspectFit"></image>
		</view>
		<view class="shop_live">
			<view class="shop_list">
				<view class="bangzhu">
					<view class="bangzhu-top" @click="changjian(e)">
						<view class="bangzhu-cu size">帮助中心</view>
					</view>
					<u-sticky>
						<view class="" style="background-color: #fff; width: 100%;">
							<v-tabs v-model="current" :tabs="tabs" @change="stateFunc" ></v-tabs>
						</view>
					</u-sticky>

					<view class="u-page__item" v-if="stateVal == 42">
						<view class="group-hd" @click="changjianText(1)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">租期内可修改租赁时间吗?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(2)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">如何取消订单?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(3)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">为什么下单了在我的订单中看不到订单?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(4)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">手机号不用了能修改订单或手机号吗?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
					</view>
					<view class="u-page__item" v-if="stateVal == 43">
						<view class="group-hd" @click="changjianText(5)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">租用多久可以买断?如何买断、归还?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(6)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">商品的押金是多少?能免押吗? 免押金是什么?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(7)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">租机时需要支付哪些费用?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(8)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">为何有的订单发货前会扣多期?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
					</view>
					<view class="u-page__item" v-if="stateVal == 44">
						<view class="group-hd" @click="changjianText(9)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">下单后多久发货?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(10)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">不是本人签收可以吗?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
					</view>
					<view class="u-page__item" v-if="stateVal == 46">
						<view class="group-hd" @click="changjianText(11)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">维修期间商品账单日期怎么算?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(12)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">维修寄出的费用由谁来承担?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(13)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">租赁期间的维修费用由谁来承担?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(14)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">商品可以提前买断吗?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(15)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">商品可以提前归还吗? 赠品是否需要归还?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(16)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">归还商品会产生费用吗?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
					</view>
					<view class="u-page__item" v-if="stateVal == 47">
						<view class="group-hd" @click="changjianText(17)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">审核失败了一次，还能继续下单重新审核吗?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(18)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">审核失败后押金如何处理?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(19)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">审核时间?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(20)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">芝麻分多少能过审核?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(21)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">不选择意外保险，会不会降低通过率?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
					</view>
					<view class="u-page__item" v-if="stateVal == 48">
						<view class="group-hd" @click="changjianText(22)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">还机后，我的隐私如何保障?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(23)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">租比买有什么优势?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(24)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">手机都是全新的吗?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
						<view class="group-hd" @click="changjianText(25)">
							<view class="left" style="padding-left: 3vw;">
								<text class="min-name" style="    white-space: nowrap;">逾期的后果和影响?</text>
							</view>
							<view class="right">
								<text class="icon iconfont icon-jiantou"
									style="font-size: 15rpx;color: #9A9A9A;"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="kefu_bottom">
					<view class="left d-c-c" @click="call">
						<image :src="app_url + '/image/wxpng/phone.svg'" mode="scaleToFill" style="width: 143px; height: 39px; top: 0;" />
					</view>
				</view>
				<view class="bottom"> 服务时间: 周一至周日 9:00~18:00 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseurl from "@/config.js";
	export default {
		data() {
			return {
				app_url: baseurl.app_url,
				current: 0,
				tabs: ['订单问题', '支付问题', '发货问题', '售后问题', '审核问题', '其他问题'],
				list1: [{
					name: '订单问题',
					id: 42
				}, {
					name: '支付问题',
					id: 43
				}, {
					name: '发货问题',
					id: 44
				}, {
					name: '售后问题',
					id: 46
				}, {
					name: '审核问题',
					id: 47
				}, {
					name: '其他问题',
					id: 48
				}],
				baseurl: "",
				bg: "",
				bg1: "",
				gradation: "",

				state: {
					tenant_id: "",
					chat_wd_id: "",
					cyphone: "",
				},
				stateVal: 42,
			};
		},
		mounted() {
			this.baseurl = baseurl.app_url;
			this.bg = uni.getStorageSync("bg");
			this.bg1 = uni.getStorageSync("bg1");
			this.gradation = uni.getStorageSync("gradation");
			this.initData();
		},
		methods: {
			changjianText(e){
				uni.navigateTo({
					url: '/pages/recycle/recycleText?id=' + e
				})
			},
			stateFunc(item) {
				console.log(item)
				switch (item) {
					case 0:
						this.stateVal = 42
						break;
					case 1:
						this.stateVal = 43
						break;
					case 2:
						this.stateVal = 44
						break;
					case 3:
						this.stateVal = 46
						break;
					case 4:
						this.stateVal = 47
						break;
					case 5:
						this.stateVal = 48
						break;
					default:
						break;
				}
			},
			call() {
				const self = this;
				// 拨打电话
				uni.makePhoneCall({
					phoneNumber: self.state.cyphone,
				});
			},
			initData() {
				const self = this;
				self._get("setting.setting/cyphone", {}, ({
					data
				}) => {
					const {
						cyphone: result
					} = data;
					Object.keys(self.state).forEach(key => {
						self.state[key] = result[key];
					});
					console.log('客服信息：', self.state);
				});
			},
			changjian(e) {
				uni.navigateTo({
					url: "../help-center/help-center",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.active {
		background-color: #FFF6E5;
		color: #FCAA04;
		font-weight: bold;
		box-shadow: 0 5rpx 0 #F7AC18;
	}

	.tab-item {
		flex: 1;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #999999;
		margin: 0 12rpx;
		background-color: #F1F2F6;
		padding: 0 30rpx;
		border-radius: 15rpx;

	}

	.tab-item:nth-last-child(1) {
		padding-right: 50rpx;
	}

	.contact-btn {
		width: 686rpx;
		height: 96rpx;
		background: #00cc88;
		color: #fff;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.contact-btn contact-button {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.shop_live {
		height: 612rpx;
	}

	.shop_list {
		height: auto;
		padding: 0 40rpx;
		box-sizing: border-box;
		position: relative;
		background: #f5f5f5;

		.shop_list_all {
			width: 670rpx;
			height: 308rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;

			.shop_list_all_time_one {
				display: flex;
				justify-content: flex-end;
				flex-direction: column;

				.text_one {
					font-size: 44rpx;
					font-weight: 400;
					color: #000000;
				}

				.text_two {
					margin-top: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
				}
			}

			.shop_list_all_time_img {
				image {
					width: 180rpx;
					height: 188rpx;
				}
			}
		}

		.shop_list_all_line {
			margin-top: -126px;
			width: 670rpx;
			height: 116rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;

			.shop_list_all_line_one {
				display: flex;
				justify-content: flex-end;
				flex-direction: column;

				.text_three {
					font-size: 36rpx;
					font-weight: 400;
					color: #0050b4;
				}

				.text_fore {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					margin-top: 10rpx;
				}
			}

			.shop_list_all_line_img {
				botton {
					border: none;
					position: relative;
					top: 20rpx;
				}

				image {
					width: 96rpx;
					height: 96rpx;
					position: relative;
					top: 10rpx;
				}
			}
		}

		.shop_list_all_hotline {
			margin-top: 26rpx;
			width: 670rpx;
			height: 116rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;
			margin-bottom: 600rpx;

			.shop_list_all_hotline_img {
				display: flex;
				justify-content: center;
				align-items: center;

				.shop_list_all_hotline_img_r {
					margin-left: 4rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.text_five {
						font-size: 36rpx;
						font-weight: 400;
						color: #0050b4;
					}

					.text_six {
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						margin-top: 10rpx;
					}
				}

				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.shop_list_all_hotline_one {
				display: flex;
				align-items: center;
				justify-content: center;

				width: 148rpx;
				height: 56rpx;
				background: #e6212a;
				box-shadow: 0rpx 8rpx 8rpx 2rpx rgba(230, 33, 42, 0.25);
				border-radius: 240rpx;
				opacity: 1;

				text {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
	}

	.kefu-bg {
		width: 100%;
		height: 170px;
		z-index: -10;

		.image-bg {
			width: 100%;
			height: 280rpx;
			z-index: 0;
		}

		.gao {
			width: 100%;
			height: 300rpx;
			background-color: #2b85e4;
		}
	}

	.bangzhu {
		// width: 650rpx;
		// height: 490rpx;
		background: #fff;
		border-radius: 20rpx;
		position: relative;
		top: -54rpx;
		z-index: 9;
		padding: 0 20rpx;
	}

	.bangzhu-top-icon {
		width: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bangzhu-top {
		width: 650rpx;
		height: 90rpx;
		line-height: 90rpx;
		// background: greenyellow;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;

		.bangzhu-cu {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			// background: firebrick;
		}

		.size {
			font-size: 36rpx;
			font-weight: 900;
		}

		.jiantou {
			text-align: right;
			color: #ccc;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 6rpx;
				position: relative;
				top: 4rpx;
			}
		}
	}

	.bangzhu-buttom {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		// background: greenyellow;
		background: #fff;
		display: flex;
		flex-flow: row nowrap;
		// justify-content: space-between;
		position: relative;

		&:before {
			content: "";
			width: 100%;
			position: absolute;
			// border-top: 0.5px solid #ccc;
		}

		.bangzhu-cu {
			width: 50%;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;

			// background: firebrick;
			.bangzhu-bg {
				width: 40rpx;
				height: 40rpx;
				// background-image: url('https://i-s2.328888.xyz/2022/06/30/62bd44b826d9a.png');
				// background-size: contain;
				// background-repeat: no-repeat;
			}

			.bangzhu-bg1 {
				width: 160rpx;
				height: 40rpx;
			}
		}

		.bangzhu-buttom-left {
			text-align: left;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: start;
			// margin-left: 8px;
			// font-size: 20px
			// image {
			// 	width: 20px;
			// 	height: 20px;
			// 	// margin-left: 3px;
			// 	margin-right: 12px;
			// 	position: relative;
			// 	top: 5px;

			// }
			.bangzhu-buttom-left-image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
				// position: relative;
				// top: 5px;
				background-image: url("https://i-s2.328888.xyz/2022/06/30/62bd44b826d9a.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			// https://i-s2.328888.xyz/2022/06/30/62bd44b6a7a69.png
			.bangzhu-buttom-left-image1 {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
				// position: relative;
				// top: 5px;
				background-image: url("https://i-s2.328888.xyz/2022/06/30/62bd44b6a7a69.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.bangzhu-buttom-left-image2 {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
				// position: relative;
				// top: 5px;
				background-image: url("https://i-s2.328888.xyz/2022/06/30/62bd44b6676bb.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.bangzhu-buttom-left-image3 {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
				// position: relative;
				// top: 5px;
				background-image: url("https://i-s2.328888.xyz/2022/06/30/62bd44b766929.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			span {
				font-size: 30rpx;
			}
		}

		.bangzhu-buttom-right {
			width: 300rpx;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.bangzhu-buttom-right-bg {
				width: 30rpx;
				height: 30rpx;
				background-image: url("https://i-s2.328888.xyz/2022/06/30/62bd6933051f7.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				margin-right: 0;
			}
		}
	}

	.oooo {
		width: 100%;
		height: 1800rpx;
		background: #ccc;
		position: relative;
	}

	.kefu_bottom {
		width: 100%;
		height: 140rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		// border: 1px solid #ccc;
		// background-color: green;
		// margin-top: 60rpx;
		// line-height:70px;
		position: relative;
		top: -10rpx;

		.left {
			width: 49%;
			height: 140rpx;
			background-color: #fff;
			border-radius: 20rpx;
			border: 0;
			color: #000;
			display: flex;
			flex-flow: row;
			align-items: center;
			justify-content: space-evenly;

			.ifg_1 {
				width: 60rpx;
				height: 60rpx;

				image {
					top: 0;
					width: 60rpx;
					height: 60rpx;
				}
			}

			.ifg_2 {
				width: 130px;
				height: 39px;
				overflow: hidden;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				position: relative;
				top: 4rpx;
			}

			.text {
				font-size: 30rpx;
				font-weight: 900;
			}
		}
	}

	.bottom {
		width: 100%;
		height: 140rpx;
		line-height: 140rpx;
		text-align: center;
		color: #666666;
		font-size: 24rpx;
		position: relative;
		top: -10rpx;
	}
	.v-tabs__container{
		width : 100%
		view {
			width: 25%;
		}
	}
</style>